import './index.scss'
import { Divider, Table, Space, Switch, Button, Col, Form, Input, Row, Select, theme, DatePicker, Pagination, Modal, message, List } from 'antd';
import React, { useEffect, useState } from 'react';
import { Label } from '../../../utils/sendRequst'
import { remove } from '../../../utils/sendRequst'
import { compile } from '../../../utils/sendRequst'
import { add } from '../../../utils/sendRequst'


const Student = () => {

    const [form] = Form.useForm();

    //这是专区渲染
    const [dataList, SetDataList] = useState([]);
    const [list, SetList] = useState([])

    //编辑模态框
    const [isModalOpen, setIsModalOpen] = useState(false);

    //编辑的ID
    const [dataID, setDateID] = useState([])

    //添加的模态框
    const [isModalOpen2, setIsModalOpen2] = useState(false);



    //编辑的模态框隐藏
    const QuXiao = () => {
        setIsModalOpen(false);
    }
    //编辑的模态框确定
    const onFinishOk = (values) => {

        let list = []
        list.push(values)
        let op = list.map((item) => ({ ...item, classifyID: dataID }))

        setIsModalOpen(false);
        compile(op[0]).then(res => {
            if (res.code == 200) {
                message.success("修改成功")
                getStu();
            } else {
                message.success("修改失败")
            }
        })
    }

    const [superior, setSuperior] = useState([]);
    const [options, setOptions] = useState([]);

    //获取专区数据
    const getStu = () => {
        Label().then(res => {
            console.log(res.data);
            const newSuperior = res.data
                .filter(item => item.classifyClass == 1)
                .map(item => item.classifyID);
            setSuperior(newSuperior);
            const list = res.data.map(item => ({ ...item, key: item.classifyID }))
            SetDataList(list)
        })

    };
    useEffect(() => {
        setOptions(superior.map(item => ({ label: item, value: item })));
        console.log(superior);
    }, [superior]);
    //添加确定取消的模态框
    const onFinishok2 = (values) => {

        setIsModalOpen2(false);
        add(values).then(res => {
            if (res.code == 200) {
                getStu()
                message.success("添加成功")
            } else {
                message.success("添加失败")
            }

        })
    }
    //添加取消的模态框

    //添加确定后出现的模态框
    const addTo = () => {
        setIsModalOpen2(true);
    }

    //编辑专区
    const edit = (row) => {

        SetList(row)
        setIsModalOpen(true);
        // setDateID(row.zoneId)
        // console.log(row);
        setDateID(row.classifyID)

    }


    //删除
    const shanChu = (row) => {
        console.log(list);
        if (row.classifyType == true || row.classifyParentID != "无") {
            message.success("当前标签已上架或有下级标签不可删除")
        } else {
            remove(row).then(res => {
                if (res.code == 200) {
                    getStu();
                    message.success("删除成功")
                } else {
                    message.success("删除失败")
                }
            })
        }
    }


    const columns = [
        {
            title: '序号',
            dataIndex: 'classifyID',
        },
        {
            title: '标签',
            dataIndex: 'classifyName',
        },
        {
            title: '标签分类',
            dataIndex: 'classifyClass',
        },
        {
            title: '上级ID',
            dataIndex: 'classifyParentID',
        },
        {
            title: '是否上架',
            dataIndex: 'classifyType',
            render: (text, record, index) => {
                return (
                    <Switch defaultChecked={record.classifyType}
                        disabled
                        checked={record.classifyType}
                    />
                );
            },

        },
        {
            title: '操作',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        edit(record)
                    }}>编辑</a>
                    <a onClick={() => {
                        shanChu(record)
                    }} >删除</a>
                </Space>
            ),
        },
    ];

    //设置上级ID的变化
    const [classifyClass, setClassifyClass] = useState(1)
    const [selectDisabled, setSelectDisabled] = useState(true);
    useEffect(() => {
        setSelectDisabled(classifyClass == 1);
    }, [classifyClass]);


    //获取专区数据
    useEffect(() => {
        getStu()
    }, [])

    //表格
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };
    //改变编辑中 上下架的状态
    const onSwitchChange = (checkedValue) => {
        SetList((prevState) => ({
            ...prevState,
            classifyType: checkedValue
        }));
    };

    return (
        <div >

            <div>
                <div className="heder-text">
                    <>标签列表</>
                    <div className='hederText' onClick={addTo} >
                        <p>添加</p>
                    </div>
                </div>
                <Table pagination={{ pageSize: 5 }} rowSelection={{
                    ...rowSelection,
                }}
                    columns={columns}
                    dataSource={dataList}

                />
                <Divider />

            </div>

            {/* 编辑的模态框 */}
            <>
                <Modal title="编辑专区" open={isModalOpen} footer={null} closable={false} destroyOnClose={true}>
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        onFinish={onFinishOk}
                        autoComplete="off"
                        initialValues={{ classifyName: list.classifyName, classifyParentID:null, classifyType: list.classifyType, classifyClass: list.classifyClass }}
                    >
                        <Form.Item
                            label="标签名称"
                            name="classifyName"
                            rules={[{ required: true, message: '标签名称' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="标签分类"
                            name="classifyClass"
                            rules={[{ required: true, message: '标签分类' }]}
                        >
                            <Select onChange={(value) => {
                                setClassifyClass(value);
                                if (value == 1) {
                                    form.setFieldsValue({ classifyParentID: null }); // 清空上级ID
                                }
                            }}>
                                <Option value={1}>一级标签</Option>
                                <Option value={2}>二级标签</Option>
                            </Select>
                        </Form.Item>


                        <Form.Item
                            label="上级ID"
                            name="classifyParentID"
                            rules={[{ required: true, message: '上级ID' }]}
                        >
                            <Select options={options} disabled={selectDisabled} />
                        </Form.Item>


                        <Form.Item
                            label='是否上架'
                            name="classifyType"
                        >
                            <Switch checked={list.classifyType} onChange={(checkedValue) => onSwitchChange(checkedValue)} />

                        </Form.Item>


                        <Form.Item>
                            <Button type="primary" htmlType="submit" className='btn'>
                                确定
                            </Button>
                            <Button type="default" onClick={QuXiao}>
                                取消
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </>

            {/* 添加的模态框 */}
            <>
                <Modal title="添加标签" open={isModalOpen2} footer={null} closable={false} destroyOnClose={true} >
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        onFinish={onFinishok2}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="标签名称"
                            name="classifyName"
                            rules={[{ required: true, message: '标签名称' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="标签分类"
                            name="classifyClass"
                            rules={[{ required: true, message: '标签分类' }]}
                        >
                            <Select onChange={(value) => setClassifyClass(value)}>
                                <Option value={1}>一级标签</Option>
                                <Option value={2}>二级标签</Option>
                            </Select>
                        </Form.Item>


                        <Form.Item
                            label="上级ID"
                            name="classifyParentID"
                            rules={[{ required: true, message: '上级ID' }]}
                        >
                            <Select options={options} disabled={selectDisabled} />
                        </Form.Item>

                        <Form.Item
                            label='是否上架'
                            name="classifyType"
                        >
                            <Switch value />

                        </Form.Item>


                        <Form.Item>
                            <Button type="primary" htmlType="submit" className='btn' onClick={() => {
                                form.resetFields();
                            }} >
                                确定
                            </Button>
                            <Button type="default" onClick={() => {
                                form.resetFields();
                                setIsModalOpen2(false);
                            }}>
                                取消
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </>

        </div>
    );
}





export default Student;
